<template>
  <div class="markdown-container">
    <mavon-editor :toolbarsFlag="true"
                  :subfield="false"
                  :defaultOpen="preview"
                  :ishljs="true"
                  :toolbars="toolbars"
                  v-model="mdValue" 
                  @change="handleChanged"
                  @imgAdd="imgAdd" 
                  @imgDel="imgDel"
                  @save="handleSave"
                  @previewToggle="handlePreviewToggle">
    </mavon-editor>
  </div>
</template>

<script>

// 局部注册
// import with ES6
import {mavonEditor} from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'


export default {
  components: {
    mavonEditor
  },
  data(){
    return{
      mdValue: '',
      mdHtml: '',
      toolbars: {
                  bold: true,
                  italic: true,
                  header: true,

                  alignleft: true, 
                  aligncenter: true, 
                  alignright: true, 

                  underline: true,
                  strikethrough: true, 
                  mark: true, 
                  superscript: true, 
                  subscript: true, 
                  quote: true, 
                  ol: true, 
                  ul: true, 
                  link: true, 
                  imagelink: true, 
                  code: true, 
                  table: true, 
                    
                  undo: true, 
                  redo: true, 
                  trash: true, 
                  save: true, 

                  navigation: true, 
                  help: true,  
                  preview: true
                }
    }
  },
  methods: {
    // 绑定@imgAdd event
    imgAdd(pos, $file){
      // 第一步.将图片上传到服务器.
      var formdata = new FormData();
      formdata.append('image', $file);
      console.log(pos);
      // axios({
      //     url: 'server url',
      //     method: 'post',
      //     data: formdata,
      //     headers: { 'Content-Type': 'multipart/form-data' },
      // }).then((url) => {
      //     // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
      //     /**
      //    * $vm 指为mavonEditor实例，可以通过如下两种方式获取
      //    * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
      //    * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
      //    */
      //     // $vm.$img2Url(pos, url);
      // })
    },
    // 绑定@imgDel event
    imgDel(pos){
      console.log(pos);
    },
    handleChanged(value, render) {
      // render 为 markdown 解析后的结果
      this.mdValue = value;
      this.mdHtml = render;

      console.log(this.value)
      console.log(render)
    },
    // 绑定@save event
    handleSave(value, render){
      console.log(value)
      console.log(render)
    },
    //编辑模式与预览模式切换
    handlePreviewToggle(status, value){
      console.log(status, value);
    }
  }
}
</script>

<style lang="less">

.markdown-container{
  width: 100%;
  height: 100%;
  padding: 0 15px;

  .v-note-wrapper{
    height: calc(100% - 15px) !important;
  }
}



</style>